<template>
  <div class="home">
    <section class="hero">
      <h1>欢迎来到 工具集合</h1>
      <p>
        这是一个集成了多种实用工具的平台，包括编码解码、格式化、调试等功能，
        旨在为开发者和日常用户提供便捷、高效的解决方案。
      </p>
    </section>
    <section class="features">
      <h2>平台特点</h2>
      <ul>
        <li>多种便捷工具：提供常见开发和日常工具的集成服务</li>
        <li>直观简洁的用户界面：专注项目介绍，无功能导航干扰</li>
        <li>轻量化设计：高性能、快速响应，使用体验友好</li>
      </ul>
    </section>
    <section class="about">
      <h2>关于我们</h2>
      <p>
        本项目致力于整合实用工具，提高工作效率。如果您有任何建议或改进意见，
        欢迎与我们联系，共同打造更好的工具平台。
      </p>
    </section>
  </div>
</template>

<script>
export default {
  name: "Home"
};
</script>

<style scoped>
.home {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}
.hero {
  text-align: center;
  margin-bottom: 40px;
}
.hero h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
}
.hero p {
  font-size: 1.2em;
  margin-bottom: 20px;
}
.hero img {
  max-width: 100%;
  border-radius: 8px;
}
.features,
.about {
  margin-bottom: 40px;
}
.features h2,
.about h2 {
  font-size: 1.8em;
  margin-bottom: 15px;
  border-bottom: 2px solid #3498db;
  display: inline-block;
  padding-bottom: 5px;
}
.features ul {
  list-style-type: disc;
  padding-left: 20px;
}
.features li {
  line-height: 1.8;
}
</style> 